<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>图书馆座位预约系统</title>
    <script type="text/javascript" src="{{ basepath }}static/js/jquery.js"></script>
    <script type="text/javascript" src="{{ basepath }}static/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ basepath }}static/layui/css/layui.css">
    <!--plugin-->
    <style type="text/css">
       *{
            padding: 0;
            margin: 0;
        }
        body {
            width:100%;
            height:100%;
            background-image:url("../library/static/img/index_img.jpg");
            background-repeat:no-repeat;
            background-size:100%;
            z-index:0;
        }
        .header {
            font-family:"楷体";
            text-align:center;
            font-size:70px;
            color:#666167;
            font-weight:900;
        }

        .header a{
            font-size:30px;
        }
        .content p {
            text-align:center;
            font-size:30px;
            color:white;
        }

        .select{
            text-align: center;
        }
         .select #select1 {
             width:110px;
             height:50px;

        }
         .select #select2{
             width:60px;
             height:50px;

        }
        .select #room_select {
             width:200px;
             height:50px;

        }

        .seat_title{
            line-height: 30px;
            font-size: 20px;
            font-weight:600;
            display:none;
            text-align: center;
        }
        .seat_style{
            width:90%;
            display: flex;
            flex-wrap: wrap;
            padding:0;
            margin:0 auto;
        }
        .seat_style li{
            width:21%;
            list-style: none;
            padding:15px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            font-size: 20px;
            border-radius: 4px;
            margin-bottom:30px;
            margin-right: 2%;
            margin-left: 2%;
        }
        .no_seat{
            background-color: #e3e3e3;
            color:#5e5e5e;
        }
        .has_seat{
            background-color: #fff;
        }

    </style>
</head>
<body>
<!-------------------------------------- 头部开始 -------------------------------------->
<p style="padding: 15px;line-height: 30px;font-size: 20px;font-weight: 600;"><a
        href="{{ basepath }}/library/index"><span class="span1">返回</span></a></p>

<div class="h044"></div>
<!-------------------------------------- 头部结束 -------------------------------------->
<!-------------------------------------- 内容开始 -------------------------------------->
<main>
    <div class="header">
        <p>图书馆座位预约系统</p>

    </div>

<div class="select">
    <form >
    选择教室：<select name="room" id="room_select">
    {% for room_all_data in room_all_data %}
        <option value='{{ room_all_data.id }}' id='{{ room_all_data.id }}'>{{ room_all_data.name }}</option>
    {% endfor %}
    </select>
    <button type="button" style="width:3%;margin-top:10px;margin-bottom: 10px;margin-left: 21px;"onclick="check()">查看</button>
    </form>
</div>

    <img id="seat_img" src="" alt="" style="width:40%;margin: 10px 30%;">

    <p class="seat_title">请选择座位</p>
    <ul id="seat" class="seat_style"></ul>
</main>


    <!--<div class="content">-->
        <!--<input type="file" id="file" style="display:none;" onchange="filechange(event)">-->
        <!--&lt;!&ndash;//修改，这里如果不用onchange，会出现一个小bug,当你提交后，图片只能变一次&ndash;&gt;-->
        <!--<img src="" width="200px" height="200px" id="img-change">-->
        <!--<button id="btn">保存图片</button>-->


        <!--<form method="post" id="upimage" name="upimg" enctype="multipart/form-data" action="{{basepath}}imgupload">-->
            <!--<h3>监督占座</h3>-->
            <!--<p>举报座位：<input type="text" name="seat" class="layui-input"></p>-->
            <!--<input id="avatar" type="text" value="../library/static/img/submit.png" name="avatar" style="display:none;"> {# 实际应用中要将该input标签隐藏，display:none; #}-->
            <!--<p><input type="button" value="上传" onclick="bindAvatar()"></p>-->
            <!--<div class="layui-form">-->
                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">-->
                        <!--<p>-->
                            <!--<button class="layui-btn layui-btn-small" type="button"-->
                                    <!--id="addfj" lay-verify="addfj">上传图片-->
                            <!--</button>-->
                        <!--</p>-->
                    <!--</label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<div id="fjbox" style="padding:10px">-->
                            <!--<table style="display: none">-->
                                <!--<tr>-->
                                    <!--<td width=30><a href=' ' class='removeFJ'><i-->
                                            <!--class='layui-icon' style='color:#009688'>&#x1007;</i></a></td>-->
                                    <!--<td><input type='file' lay-verify='bool_fj' name='file[]'/></td>-->
                                <!--</tr>-->
                            <!--</table>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <!--<p><input type="button" value="上传" id="sc" class="layui-btn layui-btn-normal" lay-submit lay-filter="sc"></p>-->

        <!--</form>-->
        <!--<div>-->
        <!--<input id="avatarSlect" type="file" >-->
        <!--<img id="avatarPreview" src="../library/static/img/submit.png" title="点击更换图片" >-->
        <!--</div>-->


<script>
    var seats = [];
    $(function () {

    });
    function check() {
        var room_select = $('#room_select').val();
        var data = {
            room_select: room_select,
        }

    $.ajax({
           type: "post",
           url: "{{ basepath }}check_room",
           dataType: "json",
           data:data ,
            success: function (seat_pic,result) {
                // 接受数据传递给全局变量seats
                seats = seat_pic;
                console.log(seats)
                setTable(); // 界面渲染接口数据
           }

       });
        function setTable(){
            var url = seats.seat_pic
            $("#seat_img").attr("src",url);
            $('ul li').remove();// / 图片路由
            $('.seat_title').css('display','block')
            // 界面渲染座位
            for(var i in seats.seat_datas){
                var id = seats.seat_datas[i].id;
                var zwh = seats.seat_datas[i].zwh;
                var state = seats.seat_datas[i].state;
                var data = {
                    id: id,
                }
                var cls = state ? 'has_seat' : 'no_seat';
                $("#seat").append("<li class='"+cls+"' id='"+id+"'>"+zwh+"</li>")
            }

            $("#seat").find("li") .click(function () {
                if($(this)){
                    var con=confirm('请确认您要举报的座位号是否为' + $(this).html()+'？')
                    if(con){
                        $.ajax({
                           type: "post",
                           url: "{{ basepath }}wg_jd",
                           dataType: "json",
                           data:{id:this.id },
                            success: function (data,result) {
                               alert('举报成功,管理员将确认您的举报信息是否准确')
                                console.log(data);
                                check(); // 界面重新渲染
                           }
                       });
                    }else{
                        alert('您已取消举报！')
                    }
                }
             })
        }
    }





// layui.use(['form', 'layedit', 'laydate', 'element', 'laytpl'], function () {
//     var load_alert = function () {
//         // alert("sds");
//     }
//     var $ = layui.jquery,
//         form = layui.form(),
//         layer = layui.layer,
//         layedit = layui.layedit,
//         element = layui.element();
//         laydate = layui.laydate;
//     // $('#sc').on('click', function () {
//     //
//     //     submit_form();
//     // });
//     form.on('submit(sc)', function (data) {
//         // alert($(this).serialize());
//         $("#upimage")[0].submit()
//         return false;
//     });
//     $("#addfj").click(function () {
//         if ($("input[type=file]").length == 5) {
//             return false;
//         }
//         $("#fjbox").append("<table><tr><td width=30><a href=' ' class='removeFJ'><i class='layui-icon' style='color:#009688'>&#x1007;</i></a></td><td><input type='file' class='file_uploaded' lay-verify='bool_fj' name='file[]'/></td></tr></table>");
//
//         $(".removeFJ").click(function () {
//             $(this).parent().parent().parent().remove();
//
//         });
//     });
//     var submit_form = function () {
//         // var form = $('#upimage');
//         // var formdata = new FormData(form);
//         $.ajax({
//             type: "POST",
//             url: "{{ basepath }}imgupload",
//             data: $('#upimage').serialize(),
//             async: false,
//             success: function (data) {
//                 if (data == "yes") {
//                     $("#img-alert").css("display", "block");
//                 }
//             },
//             error: function (data, status, e) {
//                 alert(e);
//             }
//         });
//     };
// })
</script>
</body>
</html>


<!--<script>-->
<!--$("#img-change").click(function () {-->
<!--$("#file").click();-->
<!--})-->
<!--var filechange=function(event){-->
<!--var files = event.target.files, file;-->
<!--if (files && files.length > 0) {-->
<!--// 获取目前上传的文件-->
<!--file = files[0];// 文件大小校验的动作-->
<!--if(file.size > 1024 * 1024 * 2) {-->
<!--alert('图片大小不能超过 2MB!');-->
<!--return false;-->
<!--}-->
<!--// 获取 window 的 URL 工具-->
<!--var URL = window.URL || window.webkitURL;-->
<!--// 通过 file 生成目标 url-->
<!--var imgURL = URL.createObjectURL(file);-->
<!--//用attr将img的src属性改成获得的url-->
<!--$("#img-change").attr("src",imgURL);-->
<!--// 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了-->
<!--// URL.revokeObjectURL(imgURL);-->
<!--}-->
<!--};-->
<!--$("#btn").click(function () {-->

<!--$.ajax({-->
<!--url: '{{ basepath }}imgupload',-->
<!--fileElementId:'file',-->
<!--dataType:'txt',-->
<!--secureuri : file,-->
<!--success: function (data){-->
<!--if(data=="yes"){-->
<!--$("#img-alert").css("display","block");-->
<!--}-->
<!--},-->
<!--error:function(data,status,e){-->
<!--alert(e);-->
<!--}-->
<!--});-->
<!--});-->



